{% load static from staticfiles %}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>端口扫描</title>
    <link rel="stylesheet" href="{% static "layui/css/layui.css" %}" media="all">
<style>


</style>
</head>

<body>

        <div class="layui-tab layui-tab-card" style="margin-top:0px;">
                <ul class="layui-tab-title">
                      <li class="layui-this"><i class="layui-icon">&#xe68e;</i><span></span>端口扫描</li>
                </ul>
            </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>端口扫描</legend>
    </fieldset>
    <form class="layui-form" action="/tools/portReady" method="post">
              <div class="layui-form-item">
                <label class="layui-form-label">扫描类型</label>
                <div class="layui-input-inline">
                  <select name="ipType" lay-verify="required" lay-filter="ip">
                    <option value="1">单个IP扫描</option>
                    <option value="2">IP段扫描</option>
                  </select>
                </div>
              </div>
              <div id="ipval">
              <div class="layui-form-item">
                    <label class="layui-form-label">IP</label>
                    <div class="layui-input-block">
                      <input type="text" name="ips" lay-verify="required" autocomplete="off" placeholder="请输入IP" class="layui-input">
                    </div>
              </div>
             </div>  
             <div class="layui-form-item">
                    <label class="layui-form-label">线程数</label>
                    <div class="layui-input-block">
                      <input type="text" name="threadSize" lay-verify="required" placeholder="请输入线程数" autocomplete="off" class="layui-input" value="20">
                    </div>
                  </div>
              <div class="layui-form-item">
                    <label class="layui-form-label">扫描端口</label>
                    <div class="layui-input-inline">
                      <select name="portType" lay-verify="required" lay-filter="port">
                        <option value="1">所有端口(1-65535)</option>
                        <option value="2">自定义端口</option>
                      </select>
                    </div>
              </div>
              <div class="layui-form-item" id="portval"></div>        

            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="sub">开始扫描</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>               
    
                       
<script src="{% static "layui/layui.js"%}"></script>
<script>
    layui.use(['jquery','form'], function() {
            var $ = layui.jquery,
            form=layui.form;

            form.on('select(ip)', function(data){
                var iphtml='<div class="layui-form-item">'+
                            '<label class="layui-form-label">IP</label>'+
                            '<div class="layui-input-block">'+
                            '<input type="text" name="ips" lay-verify="required" autocomplete="off" placeholder="请输入IP" class="layui-input">'+
                            '</div>'+
                            '</div>';
                // var iphtml2='<div class="layui-form-item">'+
                //             '<label class="layui-form-label">起始IP</label>'+
                //             '<div class="layui-input-block">'+
                //             '<input type="text" name="ips" lay-verify="required" autocomplete="off" placeholder="请输入起始IP" class="layui-input">'+
                //             '</div>'+
                //             '</div>'+
                //             '<div class="layui-form-item">'+
                //             '<label class="layui-form-label">結束IP</label>'+
                //             '<div class="layui-input-block">'+
                //             '<input type="text" name="ipe" lay-verify="required" autocomplete="off" placeholder="请输入結束IP" class="layui-input">'+
                //             '</div>'+
                //             '</div>';
                var iphtml2='<div class="layui-form-item">'+
                            '<label class="layui-form-label">IP段</label>'+
                            '<div class="layui-input-block">'+
                            '<input type="text" name="ips" lay-verify="required" autocomplete="off" placeholder="192.168.1.0/24" class="layui-input">'+
                            '</div>'+
                            '</div>';
                if(data.value==1){
                    $("#ipval").html(iphtml);
                }
                if(data.value==2){
                    $("#ipval").html(iphtml2);
                }
            }); 

            form.on('select(port)', function(data){
                var phtml='<label class="layui-form-label">自定义端口</label>'+
                            '<div class="layui-input-block">'+
                            '<input type="text" name="portNumber" lay-verify="required" autocomplete="off" placeholder="请输入扫描端口" class="layui-input" value="'+
                            '21,22,23,25,53,80,110,139,143,389,443,445,465,873,993,995,1080,1099,1311,1723,1433,1521,2181,3000,3001,3002,3306,3389,3690,4000,5432,5900,6379,7001,8000,8001,8080,8081,8161,8888,9200,9300,9080,9090,9999,11211,27017">'+
                            '</div>';
                if(data.value==1){
                    $("#portval").html("");
                }
                if(data.value==2){
                    $("#portval").html(phtml);
                }
            });

            $(".layui-btn-primary").click(function(){
                $("#portval").html("");
                var iphtml='<div class="layui-form-item">'+
                            '<label class="layui-form-label">IP</label>'+
                            '<div class="layui-input-block">'+
                            '<input type="text" name="ips" lay-verify="required" autocomplete="off" placeholder="请输入IP" class="layui-input">'+
                            '</div>'+
                            '</div>';
                $("#ipval").html(iphtml);                
            });


            form.on('submit(sub)', function(data){
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

            });
    });

</script>       

</body>

</html>